<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>施工角色考勤管理</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<!-- <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" /> -->
	<style>
		html,
		body {
			background-color: #f5f6f6;
		}

		.empty {
			margin-left: auto;
			margin-right: auto;
			width: 98%;
		}

		.doufu {
			margin-top: 5px;
		}

		.doufu li {
			width: 50%;
			float: left;
		}

		.doufu li div {
			margin: 5px;
			background-color: #fff;
			padding: 10px;
		}

		.shu {
			text-align: center;
			font-size: 22px;
			line-height: 30px;
			height: 30px;
			color: #1abc9c;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 50%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all 0.3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #f5f6f6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all 0.3s;
		}

		ul li .content table {
			width: 100%;
		}

		ul li .content td {
			border-bottom: 1px solid #dfe0e0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 20px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555;
		}

		ul li:nth-child(1) .content {
			background-color: #f5f6f6;
		}

		ul li:nth-child(2) .content {
			background-color: #f5f6f6;
		}

		/* ul li:nth-child(3) .content {
			 background-color: #f5f6f6;
			 } */
		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1abc9c;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc;
		}

		.clickfont {
			color: #72edd1;
		}

		.s {
			font-size: 10px;
			text-align: center;
		}

		.aa {
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab {
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}

		.ab span {
			margin-left: 30px;
			font-size: 16px
		}

		.select {
			display: inline-block;
			width: 100%;
			position: relative;
			vertical-align: middle;
			padding: 0;
			overflow: hidden;
			background-color: #fff;
			color: #555;
			border: 1px solid #aaa;
			text-shadow: none;
			border-radius: 4px;
			transition: box-shadow 0.25s ease;
			z-index: 2;
		}

		.select:hover {
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
		}

		.select:before {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-top-color: #ccc;
			top: 14px;
			right: 10px;
			cursor: pointer;
			z-index: -2;
		}

		.select select {
			cursor: pointer;
			padding: 10px;
			width: 100%;
			border: none;
			background: transparent;
			background-image: none;
			-webkit-appearance: none;
			-moz-appearance: none;
		}

		.select select:focus {
			outline: none;
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<input id="tab1" type="radio" name="tab" checked onclick="plants()" />
			<label for="tab1">考勤列表</label>
			<div class="content" id="qqq">
				<div v-for="(todo, index) in todos"
					style="background-color: rgb(240,239,244);margin-top: 10px;height: 130px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/gzjh.png"
							style="width:20px;height: auto;margin-top: 5px;margin-left: 10px" />
					</div>
					<div class="aa">
						<span style="margin-top: 3px;margin-left:5px;font-size: 13px">{{todo.a_createDate}}</span>
					</div>
					<div class="aa" style="text-align: right;" v-on:click="addAtt(todo.id)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">施工队伍：{{todo.a_name}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">应到人数：{{todo.a_should_num}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px">上午实到人数：{{todo.a_pm_num}}</span>
					</div>
					<div class="ab">
						<span style="font-size: 13px" v-if="todo.a_pm_num===null||todo.a_pm_num===''">下午实到人数：<span
								style="color: red;">未考勤</span></span>
						<span style="font-size: 13px"
							v-if="todo.a_pm_num!==null||todo.a_pm_num===''">下午实到人数：{{todo.a_pm_num}}</span>
					</div>
				</div>
			</div>
		</li>
		<li>
			<input id="tab2" onclick="plant()" type="radio" name="tab" />
			<label for="tab2">考勤统计</label>
			<div class="content">
				<div class="panel-body" style="background-color: #fff;">
					<table class="table table-striped table-bordered table-hover" id="tableMonth">
						<thead>
							<tr>
								<th class="s"><i class></i> 考勤日期</th>
								<th class="s"><i class></i> 应到人数</th>
								<th class="s"><i class></i> 实到人数</th>
								<th class="s"><i class></i> 缺勤人数</th>
								<th class="s"><i class></i> &nbsp;状态</th>
								<th class="s"><i class></i> 队伍名称</th>
							</tr>
						</thead>
						<tbody id="ld">
							<tr v-for="(l,index) in ld">
								<td v-text="l.a_createDate" style="text-align: center;"></td>
								<td v-text="l.a_should_num" style="text-align: center;"></td>
								<td v-if=" l.a_pm_num==null||l.a_pm_num==''">
									<p style='color: orange;text-align: center'>
										下午未考勤
									</p>
								</td>
								<td v-if=" l.a_pm_num!==null||l.a_pm_num!==''">
									<p v-text=" l.a_pm_num" style="text-align: center;"></p>
								</td>
								<td v-text="l.a_abs_num" style="text-align: center;"></td>
								<td v-if="l.a_absence==1">
									<p style='color: red;text-align: center;'>
										缺勤
									</p>
								</td>
								<td v-if="l.a_absence==0">
									<p style='color: green;text-align: center'>
										满勤
									</p>
								</td>
								<td v-text="l.a_name" style="text-align: center;"></td>
							</tr>
						</tbody>
					</table>
					<!-- 本月出勤人数统计 -->
					<div id="container" style="height: 200px; width: 100%; float: left;"></div>
				</div>
			</div>
		</li>
	</ul>
</body>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script src="../../script/echarts.min.js"></script>
<script type="text/javascript">
	apiready = function () {
		api.setRefreshHeaderInfo({
			visible: true,
			bgColor: "rgba(0,0,0,0)",
			textColor: "#666",
			textDown: "下拉刷新",
			textUp: "释放刷新",
		},
			function (ret, err) {
				window.location.reload();
				api.refreshHeaderLoadDone();
			}
		);
		var userSession = $api.getStorage("userSession");
		var proId = $api.getStorage("userSession").data.proId;
		var enterpriseId = userSession.data.enterprise.id;
		var roleId = userSession.data.sysRole.sysRoleCode.id;

		//考勤逐日统计 页面
		var vm = new Vue({
			el: "#ld",
			data: {
				ld: [],
			},
			created: function () {
				$.ajax({
					type: "post",
					url: BaseServiceUrl + "mobile/attendanceAdmin/findAllCount.json",
					data: {
						a_tid: userSession.data.team_id, //施工队ID
						e_id: enterpriseId, //企业ID
						area_id: userSession.data.areaid,
						role_id: roleId,
						// starttime: startTime
					},
					async: true,
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							vm.ld.push(result.data[i]);
						}
						api.hideProgress()
					},
				});
			},
		});
		//考勤查看列表
		var app = new Vue({
			el: "#qqq",
			data: {
				todos: [],
			},
			created: function () {
				//施工角色
				$.ajax({
					type: "post",
					url: BaseServiceUrl + "mobile/attendanceAdmin/findAll.json",
					data: {
						a_tid: userSession.data.team_id, //施工队ID
						enterpriseId: enterpriseId, //企业ID
						areaId: userSession.data.areaid,
						role_id: roleId,
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						// alert(JSON.stringify(result))
						for (var i = 0; i < result.data.length; i++) {
							app.todos.push(result.data[i]);
						}
						api.hideProgress();
					},
				});
			},
			methods: {
				addAtt: function (id) {
					api.openWin({
						name: "wss",
						url: "attr_add_window.html",
						rect: {
							x: 0,
							y: 0,
							w: "auto",
							h: "auto",
						},
						pageParam: {
							id: id,
						}, //传递参数
						bounces: true,
						delay: 200,
					});
				},
			},
		});
	};
	function plants() {
		$("#qqq").show();
	}
	function plant() {
		var userSession = $api.getStorage("userSession");
		var proId = $api.getStorage("userSession").data.proId;
		var enterpriseId = userSession.data.enterprise.id;
		var roleId = userSession.data.sysRole.sysRoleCode.id;
		//考勤统计
		//施工
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/attendanceCon/statis.json",
			data: {
				a_tid: userSession.data.team_id, //施工队ID
				e_id: enterpriseId, //企业ID
				area_id: userSession.data.areaid,
				role_id: roleId,
			},
			dataType: "json", //返回数据形式为json
			success: function (result) {
				// alert(JSON.stringify(result))
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				app.title = "xxxxx";
				option = {
					color: ["#3398DB"],
					title: {
						text: "本月出勤人数统计",
						left: "center",
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					xAxis: [
						{
							type: "category",
							data: result.daylist,
							axisTick: {
								alignWithLabel: true,
							},
						},
					],
					yAxis: [
						{
							type: "value",
						},
					],
					series: [
						{
							name: "出勤人数",
							type: "bar",
							barWidth: "60%",
							data: result.worklist,
						},
					],
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			},
		});
	}
</script>

</html>